<template>
  <div class="eCharts_2">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</template>

<script>
  import data from '../../../apiData/screen/userDistribution.js'
  export default {
    name: "eCharts_2",
    data() {
      return {
        myChart1: null,
        myChart2: null,
        data1: [ 0.56 ],
        data2: {}
      }
    },
    created() {
      this.data2 = data;
      this.$nextTick(() => {
        this.drawChart1();
        this.drawChart2();
      });
    },
    mounted() {
      window.onresize = () => (() => {
        this.drawChart1();
        this.drawChart2();
      })();
    },
    methods: {
      drawChart1() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart1 !== null && this.myChart1 !== '' && this.myChart1 !== undefined) {
          this.myChart1.dispose();  // 销毁
        }
        this.myChart1 = this.$echarts.init(document.getElementById('left'));
        let option = {
          title: {
            text: '用户留存率',
            padding: [10,10,10,10],
            textStyle:{
              color:'rgba(255,255,255,0.7)',
              fontWeight:'500',
              fontSize: 16
            }
          },
          series: [{
            type: 'liquidFill',
            radius: '40%', // 水球图的半径
            center: ['50%', '50%'],
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 0, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#fff', // 边框的阴影颜色,
                borderColor: '#ECECEC' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              opacity: 0.5, // 波浪的透明度
              shadowBlur: 15, // 波浪的阴影范围
              color: {    // 水球显示的背景颜色
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#1ECFFF' // 0% 处的颜色
                }, {
                  offset: 1, color: '#1770FD' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label:{
              color: '#fff',           // 在波浪上方时的文字颜色
              insideColor: '#242038',     // 在波浪下方时的文字颜色
              fontSize: 24          // 文字大小
            },
            backgroundStyle: {
              // color: 'rgba(255,255,255,0.1)', // 水球未到的背景颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255,255,255,0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255,255,255,0.4)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: this.data1
          }]
        };
        option && this.myChart1.setOption(option);
      },
      drawChart2() {
        // 基于准备好的dom，初始化eCharts实例
        if(this.myChart2 !== null && this.myChart2 !== '' && this.myChart2 !== undefined) {
          this.myChart2.dispose();  // 销毁
        }
        this.myChart2 = this.$echarts.init(document.getElementById('right'));
        let option = {
          title: {
            text: '用户分布',
            padding: [10,10,10,10],
            textStyle:{
              color:'rgba(255,255,255,0.7)',
              fontWeight:'500',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor: 'rgba(0,0,0,0)',
            textStyle:{
              color:'#ddd',
              fontSize:13
            },
            formatter: this.setTooltip
          },
          grid: {
            left: '0%',
            right: '4%',
            bottom: '20%',
            containLabel: true
          },
          legend: { // 设置头部图例过滤
            data: [ '男', '女'],
            textStyle: {  // 图例的字体样式
              color: '#fff'
            },
            right: 50, // 图例居右位置
            bottom: 6  // 图例居上位置
          },
          xAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel:{
                show: true,
                color: '#ddd',
                fontSize: 10,
                formatter:function(value){
                  if (value<0) {
                    return -value + '%'
                  }else{
                    return value + '%'
                  }
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                color: '#ddd',
                fontSize: 10,
              },
              data: this.data2.categories
            }
          ],
          series: [
            {
              name: '男',
              type: 'bar',
              stack: 'Total',
              label: {
                show: false
              },
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#f3bb1d' // 0% 处的颜色
                }, {
                  offset: 1, color: '#f37c1d' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              itemStyle: {
                borderRadius: [3,0,0,3]
              },
              data: this.data2.series[0].data
            },
            {
              name: '女',
              type: 'bar',
              stack: 'Total',
              label: {
                show: false,
                // position: 'left'
              },
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#38b56e' // 0% 处的颜色
                }, {
                  offset: 1, color: '#38b54b' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              itemStyle: {
                borderRadius: [0,3,3,0]
              },
              data: this.data2.series[1].data
            }
          ]
        };
        option && this.myChart2.setOption(option);
      },
      setTooltip() {
        let data = arguments[0];
        return `
          <div class="tooltip">
            <p><b style="font-size:15px;">${data[0].name}</b></p>
            <p class="tooltip_style"><span class="block" style="background: #f3801d"></span><span class="tooltip_left">${data[0].seriesName}：</span><span class="tooltip_right">${Math.abs(data[0].value)}</span></p>
            <p class="tooltip_style"><span class="block" style="background: #38b562"></span><span class="tooltip_left">${data[1].seriesName}：</span><span class="tooltip_right">${Math.abs(data[1].value)}</span></p>
            <p class="tooltip_style"><span class="tooltip_left">合计：</span><span class="tooltip_right">${Math.abs(data[0].value) + Math.abs(data[1].value)}</span></p>
          </div>
        `;
      }
    }
  }
</script>

<style scoped lang="scss">
  .eCharts_2 {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    #left{
      width: 45%;
      background-image: url('../../../assets/screen/4.svg');
      background-size: 45%;
      background-position: top 50% left 50%;
      background-repeat: no-repeat;
    }
    #right{
      width: 55%;
    }
  }
  /deep/ .tooltip{
    .tooltip_style{
      display: flex;
      align-items: center;
      .block{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 3px;
      }
      .tooltip_left,
      .tooltip_right{
        display: inline-block;
        font-size: 13px;
      }
    }
  }
</style>
